/*
 * @Author: yangzonglong
 * @Date: 2021-06-09 13:38:15
 * @version: v1.0.0
 * @Descripttion:
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-07-15 15:31:32
 * @Auditor:
 */
import React, { memo, } from 'react';
import { Select } from '@library';
import Icon from '../../icon/Icon';
import styles from './style.module.scss';


interface IProps {
  originalIndex: number;
  item: any;
  remove(index: number): void;
  changeKey(value: any, index: number): void;
  changeSort(value: any, index: number): void;
  dataSource?: any[];
}

const sortSource = [
  {
    label: '升序',
    value: 'ASC',
    id: 'ASC'
  },
  {
    label: '降序',
    value: 'DESC',
    id: 'ASC'
  }
];


const OptionSettingItem = ({ dataSource, changeKey, changeSort, remove, originalIndex, item }: IProps) => {
  return (
    <li style={{ marginTop: originalIndex === 0 ? '0' : '8px' }}>
      <Select onChange={(e: any) => {
        changeKey(e.value, originalIndex);
      }} dataSource={dataSource} url='' fieldNames={{ label: 'label', value: 'value' }} value={item?.key || undefined} />
      <Select onChange={(e: any) => {
        changeSort(e.value, originalIndex);
      }} value={item?.sort || undefined} dataSource={sortSource} fieldNames={{ label: 'label', value: 'value' }} url='' style={{ margin: '0 8px' }} />
      <Icon onClick={() => {
        remove(originalIndex);
      }} className={styles.remove} icon="remove" />
    </li>
  );
};

export default memo(OptionSettingItem);
